<template>
	<div class="padding-across-10" v-loading="loading" element-loading-text="拼命加载中">
		<div class="flex-inline">
			<headerOpreate style="float: left" :opreate-datas="opreateDatas" v-on:executeAction="executeAction"></headerOpreate>
			<div>
				<span style="font-size: 13px;font-weight: bold">{{$t('message.start')}}</span>
				<el-date-picker :editable="false" v-model="startTime" :clearable="false" size="small" type="date" placeholder="选择起始日期" @change="changeStartTime"></el-date-picker>
				<span style="font-size: 13px;font-weight: bold">{{$t('message.end')}}</span>
				<el-date-picker :editable="false" v-model="endTime" :clearable="false" size="small" type="date" placeholder="选择结束日期" @change="changeEndTime"></el-date-picker>
			</div>
		</div>
		<el-row style="width: 100%">
			<el-col :span="11">
				<span style="font-size: 13px;margin-left: 5px;font-weight: bold">关键字</span>
				<el-input style="width: 170px" size="small" v-model="deviceName" placeholder="根据设备名查询">
					<el-button id="searchData" slot="append" icon="search" @click="searchControl"></el-button>
				</el-input>
			</el-col>
			<el-col :span="13">
				<div class="block" style="text-align:right;">
					<el-pagination @current-change="handleCurrentChange" @size-change="handleSizeChange" :current-page="currentPage" :page-sizes="[10,20,30,40,50]" :page-size="pageSize" layout="total, sizes,prev, pager, next, jumper" :total="totalSize">
					</el-pagination>
				</div>
			</el-col>
		</el-row>
		<el-table border style="width: 100%;" @selection-change="handleSelectionChange" :data="tableData">
			<el-table-column :show-overflow-tooltip="true" align="center" type="selection"></el-table-column>
			<el-table-column :show-overflow-tooltip="true" label="用户名" align="center" prop="uid"></el-table-column>
			<el-table-column :show-overflow-tooltip="true" label="设备名" align="center" prop="device"></el-table-column>
			<el-table-column :show-overflow-tooltip="true" label="设备码" align="center" prop="sn" width="250"></el-table-column>
			<el-table-column :show-overflow-tooltip="true" label="控制指令" align="center" prop="cmdmsg"></el-table-column>
			<el-table-column :show-overflow-tooltip="true" label="时间" align="center" prop="time"></el-table-column>
			<el-table-column :show-overflow-tooltip="true" :label="$t('message.operation')" align="center">
				<template slot-scope="scope">
					<el-button type="primary" size="small" @click="commandDetail(scope.row)"><i class="el-icon-information el-icon--left"></i>详情</el-button>
				</template>
			</el-table-column>
		</el-table>
		<div class="block" style="text-align:right;margin-bottom:60px;padding-top: 5px">
			<el-pagination @current-change="handleCurrentChange" @size-change="handleSizeChange" :current-page="currentPage" :page-sizes="[10,20,30,40,50]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="totalSize">
			</el-pagination>
		</div>
		<!-- 控制记录详情 -->
		<el-dialog title="设备控制详情" v-model="commandDetailDialog" :class="[dialog-large-width]">
			<div style="float: left;margin-bottom: 3px;vertical-align: middle">
				<i class="fa fa-circle" style="color:#48576a"></i>
				<span>{{'总计('+total+')'}}</span>
				<i class="fa fa-circle" style="color: #13ce66"></i>
				<span>{{'成功('+success+')'}}</span>
				<i class="fa fa-circle" style="color: #ff6d6d"></i>
				<span>{{'无响应('+noresponse+')'}}</span>
			</div>
			<el-table border style="width: 100%;" :data="commandTableData">
				<el-table-column :show-overflow-tooltip="true" label="设备名" align="center" prop="name"></el-table-column>
				<el-table-column :show-overflow-tooltip="true" label="设备码" align="center" prop="sn"></el-table-column>
				<el-table-column :show-overflow-tooltip="true" label="时间" align="center" prop="time"></el-table-column>
				<el-table-column :show-overflow-tooltip="true" label="状态" align="center" prop="code">
					<template slot-scope="scope">
						<el-tag type="success" v-if="scope.row.code === 0">成功</el-tag>
						<el-tag type="danger" v-else>无响应</el-tag>
					</template>
				</el-table-column>
			</el-table>
		</el-dialog>
	</div>
</template>
<script>
	import $ from 'jquery'
	import { GloabFun, HttpServer } from '../../../../assets/js/common.js'
	import headerOpreate from '../../../../components/headerOpreate'
	let id = 1000;
	var date = new Date();
	export default {
		components: {
			headerOpreate
		},
		data() {
			//回车触发查询按钮
			document.onkeydown = function(event) {
				var e = event || window.event;
				if(e && e.keyCode == 13) { //回车键的键值为13
					$("#searchData").click(); //调用登录按钮的登录事件
				}
			};
			Date.prototype.format = function(format) {
				var date = {
					"M+": this.getMonth() + 1,
					"d+": this.getDate()
				};
				if(/(y+)/i.test(format)) {
					format = format.replace(RegExp.$1, (this.getFullYear() + '').substr(4 - RegExp.$1.length));
				}
				for(var k in date) {
					if(new RegExp("(" + k + ")").test(format)) {
						format = format.replace(RegExp.$1, RegExp.$1.length == 1 ?
							date[k] : ("00" + date[k]).substr(("" + date[k]).length));
					}
				}
				return format;
			}
			return {
				isReload: false,
				deviceName: '',
				total: '',
				success: '',
				noresponse: '',
				commandDetailDialog: false,
				loading: false,
				startTime: new Date((date.getTime() - 3600 * 1000 * 24 * 30)).format('yyyy-MM-dd') + ' 00:00:00',
				endTime: date.format('yyyy-MM-dd') + ' 23:59:59',
				tableData: [],
				commandTableData: [],
				multipleSelection: [],
				currentPage: 1,
				pageSize: 10,
				totalSize: 0,
				opreateDatas: [{
					show: true,
					size: "small",
					type: 'primary',
					icon: 'el-icon-eleg-icon_refresh el-icon--left',
					name: this.$t("message.refresh"),
					action: 'reloadDatas'
				},
				{
					type: 'primary',
					size: 'small',
					icon: "el-icon-eleg-icon_table el-icon--left",
					name: "导出表格",
					action: "exportExcel"
				},
				{
					show: GloabFun.getUid() == 'admin' ? true : false,
					size: "small",
					type: "danger",
					icon: "el-icon-delete2 el-icon--left",
					name: this.$t('message.delete'),
					action: "deleteMultiple"
				}
				]
			}
		},
		props: {
			subArgs: {
				type: Object,
				default: function() {
					return {};
				}
			}
		},
		methods: {
			executeAction(action) {
				if(action) {
					this[action]();
				}
			},
			//导出表格
			exportExcel() {　　　　　　
				require.ensure([], () => {　　　　　　　　
					const {
						export_json_to_excel
					} = require('../../../../assets/js/vendor/Export2Excel.js');　　　　　　　　
					const tHeader = ['操作用户', '发送指令', '设备码', '时间', '备注'];　　　　　　　　
					const filterVal = ['uid', 'cmd', 'sn', 'time', ''];　　　　　　　　
					const list = this.tableData;　　　　　　　　
					const data = this.formatJson(filterVal, list);　　　　　　　　
					export_json_to_excel(tHeader, data, '设备控制记录');　　　　　　
				})　　　
			},
			formatJson(filterVal, jsonData) {　　　　　　
				return jsonData.map(v => filterVal.map(j => v[j]))　　
			},
			handleCurrentChange(val) {
				this.currentPage = val;
				this.getDatas();
			},
			handleSizeChange(val) {
				this.pageSize = val;
				this.getDatas();
			},
			searchControl() {
				this.getDatas();
			},
			handleSelectionChange(val) {
				this.multipleSelection = val;
			},
			formateSelection() {
				var result = [],
				array = this.multipleSelection;
				for(var i = 0; i < array.length; i++) {
					result.push(array[i].keyid);
				}
				return result;
			},
			//开始时间
			changeStartTime() {
				this.startTime = this.startTime.format('yyyy-MM-dd') + ' 00:00:00';
				// console.log('this.startTime', this.startTime);
				this.getDatas();
			},
			//结束时间
			changeEndTime() {
				this.endTime = this.endTime.format('yyyy-MM-dd') + ' 23:59:59';
				// console.log('this.endTime', this.endTime);
				this.getDatas();
			},
			//批量删除控制记录
			deleteMultiple() {
				if(this.formateSelection().length > 0) {
					this.$confirm('此操作将删除所选设备控制记录，是否继续？', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					}).then(() => {
						HttpServer.httpPost.call(this, '/Api/User/Command/Delete', {
							keyid: this.formateSelection()
						},
						function(response) {},
						function(response) {
							if(response.data.code === 0) {
								this.getDatas();
								this.$notify({
									title: '成功',
									message: this.$t('message.bulkDeleteSuccess'),
									type: 'success',
									duration: 2500
								});
							} else {
								this.$notify.error({
									title: '错误',
									message: response.data.msg,
									duration: 2500
								});
							}
						});
					}).catch(() => {
						this.$notify.info({
							title: '消息',
							message: this.$t('message.cancleOperation'),
							duration: 2500
						})
					});
				} else {
					this.$notify({
						title: this.$t('message.warning'),
						message: this.$t('message.selectBulkDeleteWarning'),
						type: 'warning',
						duration: 2500
					});
				}
			},
			//详情
			commandDetail(row) {
				this.commandDetailDialog = true;
				HttpServer.httpGet.call(this, '/Api/User/Command/GetResponse/Detail?gid=' + row.gid, function(response) {}, function(response) {
					//console.log('记录详情', response);
					if(response.data.code === 0) {
						this.commandTableData = response.data.info;
						this.total = response.data.total;
						this.success = response.data.success;
						this.noresponse = response.data.noresponse;
					} else {
						this.$notify.error({
							title: '错误',
							message: response.data.msg,
							duration: 2500
						});
					}
				})
			},
			reloadDatas() {
				this.isReload = true;
				this.getDatas();
			},
			getDatas() {
				this.loading = true;
				var param = {
					index: this.currentPage,
  					pageSize: this.pageSize,
  					begin: this.startTime,
  					end: this.endTime,
  					device: this.deviceName
				}
				HttpServer.httpPost.call(this, '/Api/User/Command/List',param, function(response) {}, function(response) {
					this.loading = false;
					// console.log('设备控制记录',response);
					if(response.data.code === 0) {
						this.tableData = response.data.info;
						this.totalSize = response.data.totalcount;
						if(this.isReload){
							this.$notify({
								title: '成功',
								message: this.$t('message.refreshSuccess'),
								type: 'success',
								duration: 2500
							});
						}
					} else {
						this.$notify.error({
							title: '错误',
							message: response.data.msg,
							duration: 2500
						});
					}
					this.isReload = false;
				});
			}
		},
		created() {
			this.getDatas();
		}
	}
</script>
<style scoped lang="less">
	.name {
		color: #20a0ff;
	}
	
	.flex-inline {
		display: flex;
		justify-content: space-between;
		margin-bottom: 5px;
		// .set-time{
		// 	display: flex;
		// 	justify-content: space-between;
		// 	align-items: center;
		// }
	}
	
	.el-date-editor.el-input {
		width: 130px;
	}
	
	.edit-mission {
		padding-top: 50px;
		.el-dialog__header {
			background-color: #000;
		}
		.el-dialog__body {
			position: relative;
		}
		.clearfloat {
			height: 100px;
			max-height: 150px;
		}
	}
</style>